---
title: Canvas 画布
icon: Scroll
relatedFile: app/src/core/stage/Canvas.tsx
---

用于管理 HTML Canvas 元素及其 2D 渲染上下文。它负责 Canvas 的初始化、事件监听（如鼠标移动和失焦），以及将 Canvas 挂载到指定的 DOM 元素中。该服务还根据项目设置处理抗锯齿效果，并与项目的主循环和控制器状态进行交互。

## API

### `constructor(project: Project, element: HTMLCanvasElement)`

初始化 Canvas 元素，设置其 `tabIndex` 并添加鼠标移动和失焦事件监听器。鼠标移动时，如果菜单未弹出，则使 Canvas 获取焦点并触发项目渲染循环；失焦时，清除控制器中按下的按键状态。同时，获取 Canvas 的 2D 渲染上下文，并根据 `Settings` 中的配置应用抗锯齿设置。

### `mount(wrapper: HTMLDivElement)`

将 Canvas 元素挂载到指定的 `HTMLDivElement` 包装器中。它会清空包装器的现有内容，然后将 Canvas 添加进去。此外，它还会设置一个 `ResizeObserver` 来监听包装器大小的变化，并相应地调整项目的渲染器窗口大小。

### `dispose()`

从 DOM 中移除 Canvas 元素，释放其资源。
